<!--
 * @Author: 晟松
 * @Date: 2022-02-06 11:44:19
 * @LastEditors: 晟松
 * @LastEditTime: 2022-02-27 20:07:28
 * @FilePath: \volunteer-vue3-admin\src\components\UserDetail.vue
 * @Description: 
-->
<template>
	<el-row align="middle" justify="center">
		<el-col :span="6">
			<el-avatar shape="square" :size="50" :src="user.avatar"></el-avatar>
		</el-col>
		<el-col :span="10">
			<div style="padding: 14px">
				<span :style="{ fontWeight: 'bold' }">{{ user.userName }}</span>
				<div class="bottom">
					<div
						class="time"
						:style="{ marginTop: '10px', fontSize: '0.95em', }"
					>{{ genderTransNum(user.gender) }} {{ user.age || '未知' }}岁</div>
				</div>
			</div>
		</el-col>
		<el-col :span="8">{{ user.phone }}</el-col>
	</el-row>
	<el-row></el-row>
	<!-- 故意写成这种样子的if判断，免得有什么数据传递不同的情形 -->
	<el-row align="middle" v-if="user.identity == enums.identity['student'] || user.identity == 'student'">
		<div class="studentDetail">
			<p>学校：{{ user.schoolName }}</p>
			<p>学院：{{ user.college }}</p>
			<p>专业：{{ user.major }}</p>
			<p>介绍：{{ user.introduction }}</p>
		</div>
	</el-row>
	<el-row align="middle" v-else-if="user.identity == enums.identity['resident'] || user.identity == 'resident'">
		<div class="residentDetail">
			<p>社区：{{ user.communityName }}</p>
			<p>地址：{{ user.detailedAddress }}</p>
			<p>介绍：{{ user.specialDescription }}</p>
		</div>
	</el-row>
	<el-row align="middle" v-else-if="user.identity == enums.identity['community'] || user.identity == 'community'">
		<div class="residentDetail">
			<p>社区：{{ user.communityName }}</p>
			<p>介绍：{{ user.introduction }}</p>
		</div>
	</el-row>
	<el-row align="middle" v-else-if="user.identity == enums.identity['school'] || user.identity == 'school'">
		<div class="residentDetail">
			<p>学校：{{ user.schoolName }}</p>
			<p>学院：{{ user.college }}</p>
			<p>介绍：{{ user.introduction }}</p>
			<el-tag class="mx-1" size="large" type="warning">{{ managementLevelTrans(user.managementLevel) }}-{{ gradeTrans(user.grade) }}</el-tag>
		</div>
	</el-row>
</template>

<script setup>
import enums from "@/utils/enums"
import { gradeTrans } from '@/utils/trans'

const managementLevelTrans = (managementLevel) => {
	if (managementLevel == enums.managementLevel.school) return '校级管理员'
	return '院级辅导员'
}

defineProps({
	user: Object
})
const genderTransNum = (genderNum) => {
	if (genderNum == 1) {
		return '男'
	} else if (genderNum == 4) {
		return '女'
	} else {
		return '未知'
	}
}
</script>

<style lang="scss" scoped>
.studentDetail {
	display: flex;
	flex-direction: column;
}
.residentDetail {
	display: flex;
	flex-direction: column;
}
</style>